<template>
  <div>
    <h1 style="color:red">Count组件求和为：{{sum}}</h1>
    <input type="text" placeholder="请输入名字：" v-model="name">
    <button @click="addPerson">添加</button>
    <ul>
      <li v-for="p in personList" :key="p.id" >{{p.name}}</li>
    </ul>
  </div>
</template>

<script>
import {mapState,mapMutations} from 'vuex'
import {nanoid} from 'nanoid'
export default {
  name:'Person',
  data () {
    return {
      name:''
    }
  },
  methods: {
    addPerson(){
      if(this.name.trim().length){
        this.ADDPERSON({name:this.name,id:nanoid()})
      }else{
        alert('输入无效')
      }
      this.name = ''
    },
    ...mapMutations(['ADDPERSON'])
  },
  computed:{
    ...mapState(['personList','sum']),
  }
}
</script>

<style>

</style>